<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个html文件</title>
    <style>
      .active{
        color: red;
      }
    </style>
</head>
<body>
    <div id="app">
        {{ message }}
        {{num+1}}
        <div>
        {{bool}}
        </div>
        <div>
          {{bool? 'a':'b'}}
        </div>
        <div>
          {{arr}}
        </div>
        <div>
          {{arr.find(v=>v.name==='Bob')?.age}}
        </div>  
        <div v-html="htmlStr"> 
        </div>
        <div>
          <input type="text" v-model="value">
          <div>{{value}}</div>
        </div>
        <div>
          <div v-if="color==='红色'">红色</div>
          <div v-if="color==='绿色'">绿色</div>
          <div v-else>白色</div>
         </div>
         <div>
          <a v-bind:href="url">搜索一下</a>
         </div>
         <div style="width:100px; height:100px;background-color: red" v-on:click="clickDiv" id="div">

         </div>
         <div v-for="(item,index) in fruits" :key="index"> {{(index+1)+'.'+item}} </div>
         <div v-for="item in user" :key="item.name">
          {{item.name}}
         </div>
         <div style="display: flex; margin-top: 30px;">
       <select v-model="currentmens">
        <option value="首页">首页</option>
        <option value="课程信息">课程信息</option>
        <option value="教师信息">教师信息</option>
       </select>
         <div style="padding: 0 10px"  :style= "{fontSize:item===currentmens? '20px':'10px'}"     :class="{ 'active':item===currentmens}" v-for="item in mens" :key="item">{{item}}</div>
        </div>

<div> 
   
</div>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
         <script>
            var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
  num: 1,
  bool:true,
  arr:[{name:"Bob",age:20}],
    htmlStr:'<strong style="color:red" id="html">大大大</strong> ',
         value:'',
        color:1,
        url:"http://www.baidu.com",
          fruits:['香蕉',"苹果","林子"],
          user:[{name:'xiaoxin'},{name:'xiaoqi'}],
          mens:['首页','课程信息','教师信息'],
          currentmens:'首页'
        },
        methods:{
          clickDiv(){
            console.log("我点击了div");
          let color=  document.getElementById('div').style.backgroundColor
          document.getElementById('div').style.backgroundColor=color==='blue'? 'red':'blue'
        let color1= document.getElementById('html').style.color
        document.getElementById('html').style.color=color==='blue'?'blue':'red'
        }
        }
})

         </script>
    </body>
</html>
